<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 表格 


       
         el-table 
            data:数据绑定,数组数据类型  
           el-table-column  列
                prop:对应渲染数据字段名  label:标题   width:宽度
         自定义列
           1:在需要自定义列的项里面加一个template(占位标签)
           2:在template标签上加了一个  v-slot="scope(局部变量,只能在template标签内使用)"
           scope: scope.$index:索引   序号  scope.$index相当于for循环的index
                  scope.row  当前行数据(每一项的数据)   scope.row相当于for循环的item
   
    
    -->
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column label="序号">
          <template v-slot="scope">
            {{scope.$index+1}}------{{scope.row}}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="100px"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text">禁用</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./ele.css" />
    <script src="./index.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            tableData: [
              {
                sex: "男",
                date: "2016-05-02",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1518 弄",
              },
              {
                sex: "男",
                date: "2016-05-04",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1517 弄",
              },
              {
                sex: "女",
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄",
              },
              {
                sex: "男",
                date: "2016-05-03",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1516 弄",
              },
            ],
          };
        },
        methods: {
          edit(row) {
            window.console.log(row);
          },
        },
      });
    </script>
  </body>
</html>
